<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>巷陌发现 - 小众店铺推荐</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/jquery.cookie.js"></script>
    <script src="../static/layui/layui.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html, body {
            height: 100%;
            overflow: hidden;
        }
        
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background-color: white;
            color: #333;
            padding: 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            height: 60px;
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1250px;
            margin: 0 auto;
            padding: 0 20px;
            height: 100%;
        }
        
        .logo-area {
            display: flex;
            align-items: center;
        }
        
        .logo {
            width: 36px;
            height: 36px;
            background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
            border-radius: 8px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .site-title {
            font-size: 22px;
            font-weight: bold;
            color: #333;
            letter-spacing: 1px;
        }
        
        .site-desc {
            font-size: 14px;
            color: #aaa;
            margin-left: 15px;
            font-weight: normal;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
        }
        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: none;
            color: #333;
            font-size: 20px;
            cursor: pointer;
        }
        
        .nav-menu li {
            margin: 0 5px;
        }
        
        .nav-menu a {
            display: block;
            text-decoration: none;
            color: #555;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 20px;
            transition: all 0.3s;
        }
        
        .nav-menu a:hover {
            background-color: #f0f0f0;
            color: #333;
        }
        
        .nav-menu a.active {
            background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
            color: white;
        }
        
        .user-actions {
            display: flex;
            align-items: center;
        }
        
        .become-owner-btn {
            background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border: none;
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            margin-right: 20px;
            transition: all 0.3s;
        }
        
        .become-owner-btn:hover {
            background: linear-gradient(45deg, #5a0dc8 0%, #1a69e0 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(106, 17, 203, 0.3);
        }
        
        .user-profile {
            position: relative;
            cursor: pointer;
        }
        
        .user-avatar-wrap {
            display: flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 20px;
            transition: all 0.3s;
        }
        
        .user-avatar-wrap:hover {
            background-color: #f0f0f0;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 8px;
            border: 2px solid rgba(106, 17, 203, 0.3);
            transition: all 0.3s;
        }
        
        .user-avatar-wrap:hover .user-avatar {
            border-color: #6a11cb;
        }
        
        .username {
            font-size: 14px;
            color: #555;
            font-weight: 500;
        }
        
        .user-dropdown {
            position: absolute;
            top: 50px;
            right: 0;
            width: 180px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: none;
            z-index: 1001;
        }
        
        .user-dropdown.active {
            display: block;
        }
        
        .user-dropdown-item {
            padding: 12px 20px;
            color: #333;
            text-decoration: none;
            display: block;
            transition: background-color 0.3s;
            font-size: 14px;
        }
        
        .user-dropdown-item:hover {
            background-color: #f5f7fa;
        }
        
        .user-dropdown-divider {
            height: 1px;
            background-color: #eee;
            margin: 5px 0;
        }
        
        .content-container {
            flex: 1;
            width: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            position: relative;
        }
        
        .iframe-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }
        
        .iframe-loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #6a11cb;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-text {
            color: #666;
            font-size: 14px;
        }
        
        .content-iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }
        
        @media (max-width: 992px) {
            .nav-menu a {
                padding: 10px 15px;
                font-size: 15px;
            }
            
            .site-desc {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: row;
                height: 100%;
                padding: 0 15px;
            }
            
            .logo-area {
                margin-bottom: 0;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .nav-menu {
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: white;
                flex-direction: column;
                align-items: center;
                padding: 15px 0;
                display: none;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            }
            
            .nav-menu.active {
                display: flex;
            }
            
            .nav-menu li {
                margin: 8px 0;
                width: 100%;
                text-align: center;
            }
            
            .nav-menu a {
                width: 80%;
                margin: 0 auto;
            }
            
            .user-actions {
                margin-left: auto;
            }
            
            .become-owner-btn {
                padding: 6px 12px;
                font-size: 13px;
                margin-right: 10px;
            }
            
            .username {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="nav-container">
            <div class="logo-area">
                <div class="logo">巷</div>
                <div class="site-title">巷陌发现<span class="site-desc"> - 发现城市的小众角落</span></div>
            </div>
            
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <i class="layui-icon layui-icon-app"></i>
            </button>
            
            <ul class="nav-menu" id="navMenu">
                <li><a href="#" class="nav-link active" data-src="/homePageClient">首页</a></li>
                <li><a href="#" class="nav-link" data-src="/shopRecommendation">店铺推荐</a></li>
<!--                <li><a href="#" class="nav-link" data-src="/checkings">打卡记录</a></li>-->
                <li><a href="#" class="nav-link" data-src="/shopExplore">探店剧本</a></li>
                <li><a href="#" class="nav-link" data-src="/personalCollection">个人收藏</a></li>
                <li><a href="#" class="nav-link" data-src="/moments">朋友圈</a></li>
                <li><a href="#" class="nav-link overviewShops" style="display: none;" data-src="/UserOwnerShops">查看店铺</a></li>
            </ul>
            
            <div class="user-actions">
                <button class="become-owner-btn">成为店主</button>
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar-wrap">
                        <img src="https://tva1.sinaimg.cn/crop.0.0.180.180.180/006vMc6HJw8fbu9d18g8jj305k05k3ye.jpg" class="user-avatar" alt="用户头像">
                        <span class="username">用户名</span>
                    </div>
                    <div class="user-dropdown" id="userDropdown">
                        <a href="#" class="user-dropdown-item personalInformation">
                            <i class="layui-icon layui-icon-user" style="margin-right: 8px;"></i>个人中心
                        </a>
                        <a href="#" class="user-dropdown-item">
                            <i class="layui-icon layui-icon-set" style="margin-right: 8px;"></i>设置
                        </a>
                        <div class="user-dropdown-divider"></div>
                        <a href="#" class="user-dropdown-item" style="color: #FF5722;">
                            <i class="layui-icon layui-icon-logout" style="margin-right: 8px;"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-container">
        <div class="iframe-container">
            <div class="iframe-loading" id="iframeLoading">
                <div class="loading-spinner"></div>
                <div class="loading-text">加载中...</div>
            </div>
            <iframe id="contentFrame" class="content-iframe" name="contentFrame" src="/homePageClient"></iframe>
        </div>
    </div>


</body>
<!--<script>-->
<!--    var layer-->
<!--    document.addEventListener('DOMContentLoaded', function() {-->
<!--        $.ajax({-->
<!--            url: '/user/findByName',-->
<!--            type: 'post',-->
<!--            data:{-->
<!--                username: $.cookie('username')-->
<!--            },-->
<!--            success: function(res) {-->
<!--                console.log("用户信息：",res)-->
<!--                if (res.code === 200) {-->
<!--                    const userProfile = document.getElementById('userProfile');-->
<!--                    const username = document.querySelector('.username');-->
<!--                    const avatar = document.querySelector('.user-avatar');-->
<!--                    username.textContent = res.data.username;-->
<!--                    avatar.src = res.data.icon;-->
<!--                }-->
<!--            },-->
<!--            error: function(xhr, status, error) {}-->
<!--        })-->

<!--        const mobileMenuBtn = document.getElementById('mobileMenuBtn');-->
<!--        const navMenu = document.getElementById('navMenu');-->

<!--        mobileMenuBtn.addEventListener('click', function() {-->
<!--            navMenu.classList.toggle('active');-->
<!--        });-->

<!--        const userProfile = document.getElementById('userProfile');-->
<!--        const userDropdown = document.getElementById('userDropdown');-->

<!--        userProfile.addEventListener('click', function(e) {-->
<!--            e.stopPropagation();-->
<!--            userDropdown.classList.toggle('active');-->
<!--        });-->

<!--        document.addEventListener('click', function() {-->
<!--            userDropdown.classList.remove('active');-->
<!--            navMenu.classList.remove('active');-->
<!--        });-->
<!--        // 个人中心显示-->
<!--        document.querySelector(".personalInformation").addEventListener("click",function (){-->
<!--            location.href="/userInformation"-->
<!--        })-->

<!--        const contentFrame = document.getElementById('contentFrame');-->
<!--        const iframeLoading = document.getElementById('iframeLoading');-->

<!--        contentFrame.addEventListener('loadstart', function() {-->
<!--            iframeLoading.style.display = 'flex';-->
<!--        });-->

<!--        contentFrame.addEventListener('load', function() {-->
<!--            iframeLoading.style.display = 'none';-->

<!--            const currentSrc = contentFrame.src.split('/').pop();-->
<!--            const navLinks = document.querySelectorAll('.nav-link');-->

<!--            navLinks.forEach(link => {-->
<!--                const linkSrc = link.getAttribute('data-src');-->
<!--                if (linkSrc === currentSrc) {-->
<!--                    navLinks.forEach(l => l.classList.remove('active'));-->
<!--                    link.classList.add('active');-->
<!--                }-->
<!--            });-->

<!--            // 存储当前子页面到sessionStorage-->
<!--            sessionStorage.setItem('currentPage', currentSrc);-->
<!--        });-->

<!--        const navLinks = document.querySelectorAll('.nav-link');-->

<!--        navLinks.forEach(link => {-->
<!--            link.addEventListener('click', function(e) {-->
<!--                e.preventDefault();-->

<!--                navMenu.classList.remove('active');-->

<!--                navLinks.forEach(l => l.classList.remove('active'));-->
<!--                this.classList.add('active');-->

<!--                const page = this.getAttribute('data-src');-->
<!--                contentFrame.src = page;-->
<!--            });-->
<!--        });-->

<!--        window.addEventListener('resize', function() {-->
<!--            if (window.innerWidth > 768) {-->
<!--                navMenu.classList.remove('active');-->
<!--            }-->
<!--        });-->
<!--        const becomeOwnerBtn = document.querySelector('.become-owner-btn');-->

<!--        // 2. 绑定点击事件，弹出确认弹框-->
<!--        becomeOwnerBtn.addEventListener('click', function() {-->
<!--            location.href="/UserOwnerApplication"-->
<!--        });-->


<!--        // 页面加载时，检查sessionStorage中是否有保存的子页面-->
<!--        const savedPage = sessionStorage.getItem('currentPage');-->
<!--        if (savedPage && savedPage !== '/homePageClient') {-->
<!--            contentFrame.src = savedPage;-->

<!--            const navLinks = document.querySelectorAll('.nav-link');-->
<!--            navLinks.forEach(link => {-->
<!--                const linkSrc = link.getAttribute('data-src');-->
<!--                if (linkSrc === savedPage) {-->
<!--                    navLinks.forEach(l => l.classList.remove('active'));-->
<!--                    link.classList.add('active');-->
<!--                }-->
<!--            });-->
<!--        }-->
<!--    });-->
<!--</script>-->
<script src="../static/js/iframeClient.js"></script>
</html>